<template>
  <div class="data-search-index-wrapper">
    <sidebar-content>
      <div class="sidebar-container" slot="sidebar">
        <nav-menu-left :activeMenu="activeMenu" :menus="menus" @on-select-menu="selectMenu"></nav-menu-left>
      </div>
      <div class="content-container" slot="content">
        <router-view></router-view>
      </div>
    </sidebar-content>
  </div>
</template>
<script>
  import SidebarContent from "../../../layout/partial/sidebar-content/SidebarContent"
  import NavMenuLeft from "../../../layout/partial/sidebar/NavMenuLeft"
  export default {
    name: 'WithSidebar',
    components: { SidebarContent, NavMenuLeft },
    watch: {
      $route(to) {
        this.initPage(to.path);
      }
    },
    data() {
      return {
        activeMenu: 'search',
        menus: [
        {
          label: '一级菜单',
          id: 'search',
          active: false,
          icon: 'icon-service-config',
          iconSel: 'icon-service-config-sel',
          path: '/page/searchanalysis/search',
          children:[
            {
              label: '二级菜单',
              id: 'ser',
              active: false,
              icon: 'icon-service-config',
              iconSel: 'icon-service-config-sel',
              path: '',
              children:[
                {
                  label: '三级菜单',
                  id: 'ser1',
                  active: false,
                  icon: 'icon-service-config',
                  iconSel: 'icon-service-config-sel',
                  path: '',

                }
              ]
            }
          ]
        }, {
          label: '一级菜单2',
          id: 'analysis',
          active: false,
          icon: 'icon-service-config',
          iconSel: 'icon-service-config-sel',
          path: '/page/searchanalysis/analysis'
        }],
      }
    },
    mounted() {
      let path = this.$route.path;
      this.initPage(path);
    },
    methods: {
      initPage(path) {
        let paths = path.split('/').slice(1);
        this.selectMenu(paths[paths.length - 1]);
      },
      selectMenu(id) {
        this.activeMenu = id;
        this.menus.forEach((d) => {
          d.id == id ? (d.active = true /*, this.$router.push({ path: d.path })*/ ) : (d.active = false);
        })
      },
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../../assets/styles/base_style';

  .data-search-index-wrapper {
    width: 100%;
    height: 100%;

    .sidebar-container {
      height: 100%;
      overflow: auto;
      @include scrollbarStyle(6px, 3px);
    }

    .content-container {
      height: 100%;
      overflow: auto;
      padding: 10px;
      @include scrollbarStyle(10px, 5px);
    }
  }
</style>
